<template>
  <div>
    <el-row style="margin-top: 10px">
      <el-col :span="16" :offset="3">
        <el-table
          :data="list"
          style="width: 100%">
          <el-table-column
            label="资料名称"
            header-align="center"
            align="center"
            :show-overflow-tooltip="true"
            :render-header="renderHeader"
            width="207">
            <template slot-scope="scope">
              <i class="el-icon-office-building"></i>
              <span style="margin-left: 10px">{{ scope.row.resourceName }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="资源类型"
            header-align="center"
            align="center"
            width="100">
            <template slot-scope="scope">
              <i class="el-icon-tickets"></i>
              <span style="margin-left: 10px">{{ scope.row.resourceType }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="资源大小"
            header-align="center"
            align="center"
            width="120">
            <template slot-scope="scope">
              <i class="el-icon-pie-chart"></i>
              <span style="margin-left: 10px">{{ sizeFormat(scope.row.resourceSize) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="上传时间"
            header-align="center"
            align="center"
            width="200">
            <template slot-scope="scope">
              <i class="el-icon-time"></i>
              <span style="margin-left: 10px">{{ scope.row.createTime }}</span>
            </template>
          </el-table-column>
          <el-table-column
            header-align="center"
            width="155"
            align="center" label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                @click="download(scope.$index, scope.row)">下载
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'StudentResource',
  data () {
    return {
      courseId: undefined,
      list: [],
    }
  },
  methods: {
    sizeFormat (limit) {
      let size = ''
      if (limit < 0.1 * 1024) {                            //小于0.1KB，则转化成B
        size = limit.toFixed(2) + 'B'
      } else if (limit < 0.1 * 1024 * 1024) {            //小于0.1MB，则转化成KB
        size = (limit / 1024).toFixed(2) + 'KB'
      } else if (limit < 0.1 * 1024 * 1024 * 1024) {        //小于0.1GB，则转化成MB
        size = (limit / (1024 * 1024)).toFixed(2) + 'MB'
      } else {                                            //其他转化成GB
        size = (limit / (1024 * 1024 * 1024)).toFixed(2) + 'GB'
      }
      let sizeStr = size + ''                        //转成字符串
      let index = sizeStr.indexOf('.')                    //获取小数点处的索引
      let dou = sizeStr.substr(index + 1, 2)            //获取小数点后两位的值
      if (dou == '00') {                                //判断后两位是否为00，如果是则删除00
        return sizeStr.substring(0, index) + sizeStr.substr(index + 3, 2)
      }
      return size
    },
    renderHeader (h, data) {
      return h('span', [
        h(
          'el-tooltip',
          {
            attrs: {
              class: 'item',
              effect: 'dark',
              content: data.column.label,
              placement: 'top',
            },
          },
          [h('span', data.column.label)]
        ),
      ])
    },
    download (index, row) {
      window.location.href = 'http://localhost/common/download/' + row.resourceId
    },
    init () {
      this.courseId = this.$store.state.course.courseId
      this.$http({
        url: '/api/resourceCourse/list/' + this.courseId,
        method: 'get'
      }).then(res => {
        if (res.data.code === 2000) {
          this.list = res.data.result
        } else {
          this.$message({
            type: 'error',
            message: '查询信息失败!',
            duration: 1500,
          })
        }
      })
    },
  },
  created () {
    this.init()
  }
}
</script>

<style scoped>

</style>
